<template>
	<view class="" v-if="practiceNav.length">
		<u-navbar :is-back="true" :border-bottom="false" height="46" :title="practiceNav[0].name" title-color="#333" :title-size="36" :title-bold="true">
		</u-navbar>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="practice_nav_list">
			<view class="practice_list_box" v-for="(item,index) in practiceList" :key="index" @click="practiceInner(item.id)">
				<image :src="`/static/index/zypxlog${index}.png`" mode="widthFix"></image>
				<text>{{item.name}}</text> 
				<u-icon name="arrow-right" class="pra_icon" color="#999999"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				practiceList:[],
				practiceNav:[]
			}
		},
		onLoad(options) {
			this.PraNav(options.id)
		},
		methods:{
			async PraNav(id){
				let params = {
					cmd: 'nEdu_list_proc',
					para: {
						id: id,
					}
				}
				const res = await this.$u.api.PraNav(params)
				
				this.practiceList = res.Data.Datas1.filter(item => item.pid == id)
				this.practiceNav=res.Data.Datas1.filter(item=> item.id==id)
				for (var value of this.practiceNav.values()) {
					value.name = value.name.replace(/[0-9]+/g, "")
				}
				console.log(this.practiceList)
			},
			practiceInner(id){
				this.$u.route('/pages/HomeLnner/PracticeList/PracticeList', {
					id: id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.practice_nav_list{
		padding: 0 30rpx;
		.practice_list_box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 2rpx #e5e5e5 solid;
			image{
				width: 60rpx;
				margin-right: 35rpx;
			}
			text{
				flex: 1;
				font-size: 30rpx;
				color: #000000;
			}

		}
	}
</style>
